<template>
	<div class="app-container">
		<el-form ref="formData" :model="formData" label-width="80px">
			<el-form-item label="教材名称" prop="student_name">
			  <el-input v-model="formData.textbook_name" placeholder="请输入教材名称" />
			</el-form-item>
			<el-form-item label="出版社" prop="student_name">
			  <el-input v-model="formData.textbook_house" placeholder="请输入出版社" />
			</el-form-item>
			<el-form-item label="出版时间" prop="student_name">
				<el-date-picker v-model="formData.public_date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"> </el-date-picker>
			</el-form-item>
			<el-form-item label="年级" prop="student_name">
				<el-select v-model="formData.grade" placeholder="全部">
				  <el-option v-for="(item,index) in grade" :key="index" :label="item" :value="index+1" />
				</el-select>
			</el-form-item>
			<div v-for="(item,index) in formData.section">
				<div class="inp">
					<el-form-item label="主章节" prop="student_name">
					  <el-input v-model="item.section_name" placeholder="请输入主章节" />
					</el-form-item>
					<el-button type="primary" @click="addZi(index)">添加子章节</el-button>
					<el-button type="danger" @click="delMain(index)">移除</el-button>
				</div>
				<div v-if="item.child" v-for="(item2,index2) in item.child">
					<div class="inp zi">
						<el-form-item label="子章节" prop="student_name">
						  <el-input v-model="item2.section_name" placeholder="请输入子章节" />
						</el-form-item>
						<el-button type="success" @click="addtit(index,index2)">添加栏目</el-button>
						<el-button type="danger" @click="delZi(index,index2)">移除</el-button>
					</div>
					<div v-for="(item3,index3) in item2.child" class="inp tit">
						<el-form-item label="栏目" prop="student_name">
						  <el-input v-model="item3.section_name" placeholder="请输入栏目" />
						</el-form-item>
						<el-button type="danger" @click="deltit(index,index2,index3)">移除</el-button>
					</div>
				</div>
			</div>
			<el-button @click="addMain">添加主章节</el-button>
			<el-button @click="sub">提交</el-button>
		</el-form>
	</div>
</template>

<script>
import { addTeach } from '@/api/studentRecruit.js'
export default {
	components:{
		
	},
	data() {
		return{
			formData:{
				textbook_name:'', //教材名称
				textbook_house:'', //出版社
				public_date:'', //出版时间
				grade:'', //年级
				section:[
					/* {
						section_name:'',
						level:1,
						child:[]
					} */
				], //章节信息
			},
			grade:['一年级','二年级','三年级','四年级','五年级','六年级','初一','初二','初三','高一','高二','高三'],
		}
	},
	created() {
		
	},
	methods:{
		getMes(){
			console.log('teaData',this.teaData);
			/* let data1 = {
				section_name:this.teaData.section[i].section_name,
				level:1,
				child:[]
			}
			console.log(this.teaData.section[i]);
			this.formData.section.push(data1) */
			let tr1 = []
			let tr2 = []
			let tr3 = []
			let tr4 = []
			for (let i = 0; i < this.teaData.section.length; i++) {
				switch (this.teaData.section[i].level){
					case 1:
					tr1.push(this.teaData.section[i])
						break;
					case 2:
					tr2.push(this.teaData.section[i])
						break;
					case 3:
					tr3.push(this.teaData.section[i])
						break;
					default:
						break;
				}
			}
			/* for (var i = 0; i < tr1.length; i++) {
				tr1[i].child = []
				for (var j = 0; j < tr2.length; j++) {
					if(tr1[i].unid == tr2[j].pid){
						tr1[i].child.push(tr2[j])
					}
				}
				for (var k = 0; k < tr1.length; k++) {
					for (var l = 0; l < tr1[k].child.length; l++) {
						tr1[k].child[l].child = []
						console.log(tr1[k].child[l].unid);
						for (var r = 0; r < tr3.length; r++) {
							if(tr1[k].child[l].unid == tr3[r].pid){
								tr1[k].child[l].child.push(tr3[r])
							}
						}
					}
				}
			} */
			for (var i = 0; i < tr1.length; i++) {
				console.log(tr1[i].unid);
				let data1 = {
					unid:tr1[i].unid,
					pid:tr1[i].pid,
					section_name:tr1[i].section_name,
					level:tr1.level,
					child:[],
				}
				tr4.push(data1)
				for (var j = 0; j < tr2.length; j++) {
					console.log(tr2[j].pid);
					if(tr1[i].unid == tr2[j].pid){
						let data2 = {
							unid:tr2[j].unid,
							pid:tr2[j].pid,
							section_name:tr2[j].section_name,
							level:tr2.level,
							child:[],
						}
						for (var k = 0; k < tr4.length; k++) {
							tr4[k].child.push(data2)
							for (var l = 0; l < tr4[k].child.length; l++) {
								for (var m = 0; m < tr3.length; m++) {
									if(tr4[k].child[l].unid == tr3[m].pid){
										let data3 = {
											unid:tr3[m].unid,
											pid:tr3[m].pid,
											section_name:tr3[m].section_name,
											level:tr3.level,
											child:[],
										}
										tr4[k].child[l].child.push(data3)
									}
								}
							}
						}
					}
				}
			}
			console.log(tr1);
			console.log(tr2);
			console.log(tr3);
			for (var i = 0; i < tr4.length; i++) {
				delete tr4[i].unid
				delete tr4[i].pid
				for (var j = 0; j < tr4[i].child.length; j++) {
					delete tr4[i].child[j].unid
					delete tr4[i].child[j].pid
					for (var k = 0; k < tr4[i].child[j].child.length; k++) {
						delete tr4[i].child[j].child[k].unid
						delete tr4[i].child[j].child[k].pid
					}
				}
			}
			console.log(tr4);
			this.formData.section = tr4
			this.formData.textbook_name = this.teaData.textbook_name
			this.formData.textbook_house = this.teaData.textbook_house
			this.formData.public_date = this.teaData.public_date
			this.formData.grade = this.teaData.grade
			console.log(this.formData);
		},
		//提交
		async sub(){
			console.log(this.formData);
			this.formData.grade = this.formData.grade.toString()
			let data = await addTeach(this.formData)
			console.log(data);
			if(data.code == 200){
				this.$message.success('添加成功!')
			}else{
				this.$message.error('添加失败!')
			}
		},
		// 添加主章节
		addMain(){
			let resData = {
				section_name:'',
				level:1,
				child:[],
			}
			this.formData.section.push(resData)
			console.log(this.formData);
		},
		// 添加子章节
		addZi(index){
			let resData = {
				section_name:'',
				level:2,
				child:[]
			}
			console.log(index);
			this.formData.section[index].child.push(resData)
			console.log(this.formData);
		},
		// 添加栏目
		addtit(index,index2){
			console.log(index,index2);
			let resData = {
				section_name:'',
				level:3,
			}
			this.formData.section[index].child[index2].child.push(resData)
		},
		//移除栏目
		deltit(index,index2,index3){
			console.log(index,index2,index3);
			this.formData.section[index].child[index2].child.splice(index3,1)
		},
		//移除子章节
		delZi(index,index2){
			console.log(index,index2);
			this.formData.section[index].child.splice(index2,1)
		},
		//移除章节
		delMain(index){
			this.formData.section.splice(index,1)
			console.log(index);
		}
	},
	props:{
		teaData:{
			type:Object,
			default:''
		}
	}
}
</script>

<style lang="scss">
	.inp{
		display: flex;
		flex-direction: row;
		
		input{
			margin-right: 15px;
			width: 200px;
		}
		
		button{
			height: 40px;
			width: 80px;
			padding: 0;
		}
	}
	.zi{
		margin-left: 20px;
		
		input{
			width: 180px;
			margin-right: 15px;
		}
	}
	
	.tit{
		margin-left: 40px;
		
		input{
			width: 160px;
			margin-right: 15px;
		}
	}
</style>
